<template>
  <el-card>
    <el-input class="width200" placeholder="名称" v-model="name" clearable></el-input>
    <vk-data-input-select v-model="status" class="width200" clearable :localdata='statusArr'
      placeholder="请选择状态"></vk-data-input-select>
    <el-button type="primary" @click="searchList">查询合同</el-button>
    <!-- <el-button type="primary" @click="showGood">新增合同</el-button> -->
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="_id" label="_id">
      </el-table-column>
      <el-table-column prop="sign_name" label="签约姓名">
      </el-table-column>
      <el-table-column prop="sign_mobile" label="签约电话">
      </el-table-column>
    <!--  <el-table-column prop="sign_card" label="签约身份证">
      </el-table-column> -->
      <el-table-column prop="_add_time_str" label="签约时间">
      </el-table-column>
      <el-table-column prop="coupon_name" label="关联券包">
      </el-table-column>
      <el-table-column prop="expire_time" label="到期时间">
      </el-table-column>
      <el-table-column prop="stock" label="签约数量">
      </el-table-column>
      <el-table-column prop="price" label="签约价格">
      </el-table-column>
      <el-table-column prop="per_bonus" label="周期佣金">
      </el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
         <span>{{scope.row.status== 1 ? '正常': scope.row.status == 2 ? '已过期': '已作废'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="原因">
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="isCoupon" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="template" label-width="80px">
        <el-form-item label="名称">
          <el-input class="width400" v-model="template.name"></el-input>
        </el-form-item>
        <el-form-item label="上传协议">
          <vk-data-input-editor v-model="template.url"  width="750px"></vk-data-input-editor>
        </el-form-item>
        <el-form-item label="备注">
          <el-input class="width400" v-model="template.des"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        status: '',
        template: {
          name: '',
          url: '',
          des: ''
        },
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isCoupon: false,
        tableData: [],
        statusArr: [{
            label: '使用中',
            value: 1
          },
          {
            label: '已过期',
            value: 2
          },
          {
            label: '已作废',
            value: 3
          }
        ],
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      showGood() {
        this.isCoupon = true
        this.template= {
          name: '',
          url: '',
          des: ''
        }
      },
      signAfter() {
        vk.callFunction({
          url: 'client/timedTask/pub/autobonus',
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum = val
        this.getList()
      },
      handleEdit(index, row) {
        this.template = row
        this.isCoupon = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该合同吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.goodDelete(row)
          }
        });
      },
      goodDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        
        // 先查询一下是否有关联券包
        vk.callFunction({
          url: 'user/kh/contractDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            this.getList()
          }
        })
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        let obj = {}
        if (this.name) {
          obj.name = this.name
        }
        if (this.status) {
          obj.status = this.status
        }
        vk.callFunction({
          url: 'user/kh/contractList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            ...obj
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      onSubmit() {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        vk.callFunction({
          url: 'user/kh/templatePost',
          data: this.template,
          success: (res) => {
            if (res) {
              uni.hideLoading()
              console.log(res)
              this.isCoupon = false
              this.getList()
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }
.update-img {
  width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #d5d5de;
  border: 1px solid #ccc;
	&::before {
		line-height: 1;
		font-size: 45px;
		content: "+";
	}
	&::after {
		content: "上传";
		font-size: 12px;
	}
}
.update-txt {
  width: 300px;
  display: inline-block;
  white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }
  .width100 {
    width: 100px
  }
  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;
    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }
    &-name {
      margin-left: 10px;
    }
    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>